<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				width: 300px;
				list-style: none;
				border: 1px solid grey;
				margin: 0 auto;
				cursor: pointer;
			}

			ul li {
				width: 300px;

			}

			ul li h3 {
				width: 300px;
				height: 50px;
				background: #ccc;
				text-align: center;
				font-size: 30px;
				line-height: 50px;
				border-bottom: 1px solid grey;
			}

			ul li h3:hover {
				background: red;
			}


			ul li p {
				width: 300px;
				height: 200px;
				font-size: 25px;
				display: none;

			}

			ul .on p {
				display: block
			}
		</style>
		<script src="js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li class="on">
				<h3>国内新闻</h3>
				<p>内容</p>
			</li>
			<li>
				<h3>国外新闻</h3>
				<p>内容</p>
			</li>
			<li>
				<h3>娱乐新闻</h3>
				<p>内容</p>
			</li>
		</ul>

		<script>
			$(function() {
				$("ul li h3").on("click", function() {
					$(this).parent().toggleClass("on");
					$(this).parent().siblings().removeClass("on");
					
					// 動畫版
					// $(this).siblings("p").slideToggle(1000);
					// $(this).parent().siblings().find("p").slideUp(1000);
					
				});
			})
		</script>
	</body>
</html>
